import { useTranslation } from 'react-i18next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { CheckCircle } from 'lucide-react';

export function AboutPage() {
  const { t } = useTranslation();

  const technologies = [
    'React 18',
    'TypeScript',
    'Vite',
    'React Router',
    'React i18next',
    'Axios',
    'Shadcn/ui',
    'Radix UI',
    'Tailwind CSS',
    'Lucide React',
  ];

  const features = [
    'Modern React 18 with concurrent features',
    'Full TypeScript support for type safety',
    'Fast development with Vite',
    'Client-side routing with React Router',
    'Complete internationalization (i18n)',
    'HTTP client with Axios interceptors',
    'Beautiful UI components with Shadcn/ui',
    'Accessible components with Radix UI',
    'Utility-first CSS with Tailwind',
    'Responsive design principles',
    'Performance optimized',
    'Enterprise-ready architecture',
  ];

  return (
    <div className='space-y-12'>
      {/* Header */}
      <div className='text-center space-y-4'>
        <h1 className='text-4xl font-bold tracking-tighter sm:text-5xl'>
          {t('about.title')}
        </h1>
        <p className='mx-auto max-w-[700px] text-lg text-muted-foreground'>
          {t('about.description')}
        </p>
      </div>

      {/* Mission */}
      <Card>
        <CardHeader>
          <CardTitle className='text-2xl'>Our Mission</CardTitle>
        </CardHeader>
        <CardContent>
          <p className='text-lg text-muted-foreground'>{t('about.mission')}</p>
        </CardContent>
      </Card>

      {/* Technology Stack */}
      <section className='space-y-6'>
        <div className='text-center'>
          <h2 className='text-3xl font-bold tracking-tighter'>
            Technology Stack
          </h2>
          <p className='text-muted-foreground mt-2'>
            Built with modern technologies and best practices
          </p>
        </div>
        <div className='flex flex-wrap gap-2 justify-center'>
          {technologies.map(tech => (
            <Badge key={tech} variant='secondary' className='text-sm'>
              {tech}
            </Badge>
          ))}
        </div>
      </section>

      {/* Features */}
      <section className='space-y-6'>
        <div className='text-center'>
          <h2 className='text-3xl font-bold tracking-tighter'>Key Features</h2>
          <p className='text-muted-foreground mt-2'>
            Everything you need for enterprise-grade applications
          </p>
        </div>
        <div className='grid gap-4 sm:grid-cols-2'>
          {features.map((feature, index) => (
            <div key={index} className='flex items-start space-x-3'>
              <CheckCircle className='h-5 w-5 text-green-500 mt-0.5 flex-shrink-0' />
              <span className='text-sm'>{feature}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Architecture */}
      <Card>
        <CardHeader>
          <CardTitle className='text-2xl'>Architecture Overview</CardTitle>
          <CardDescription>
            Clean, scalable, and maintainable codebase structure
          </CardDescription>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='grid gap-4 sm:grid-cols-2'>
            <div>
              <h4 className='font-semibold mb-2'>Frontend Layer</h4>
              <ul className='text-sm text-muted-foreground space-y-1'>
                <li>• React components with TypeScript</li>
                <li>• State management with React hooks</li>
                <li>• Routing with React Router</li>
                <li>• UI components with Shadcn/ui</li>
              </ul>
            </div>
            <div>
              <h4 className='font-semibold mb-2'>Development Tools</h4>
              <ul className='text-sm text-muted-foreground space-y-1'>
                <li>• Vite for fast development</li>
                <li>• TypeScript for type safety</li>
                <li>• ESLint for code quality</li>
                <li>• Tailwind CSS for styling</li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
